<template>
  <view class="customer-service-page">
    <!-- 智能客服区域 -->
    <view class="chat-container">
      <view class="bot-message">
        <text>Hi,您好!智能客服为您服务,请问有什么可以帮您?</text>
      </view>

      <!-- 常见问题 -->
      <view class="faq-section">
        <view class="faq-header">
          <uni-icons type="help" size="24" color="#00C853"></uni-icons>
          <text>常见问题</text>
        </view>
        <view class="faq-list">
          <view class="faq-item" @tap="handleFaqClick('退款什么时候到账')">
            <text>退款什么时候到账?</text>
            <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
          </view>
          <view class="faq-item" @tap="handleFaqClick('无法支付')">
            <text>无法支付怎么办?</text>
            <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
          </view>
          <view class="faq-item" @tap="handleFaqClick('餐品还没送到')">
            <text>我的餐品怎么还没送到?</text>
            <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
          </view>
          <view class="faq-item" @tap="handleFaqClick('代金券无法使用')">
            <text>"代金券"无法使用?</text>
            <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
          </view>
          <view class="faq-item" @tap="handleFaqClick('如何取消订单')">
            <text>如何取消订单?</text>
            <uni-icons type="arrowright" size="18" color="#ccc"></uni-icons>
          </view>
        </view>
        <view class="faq-more" @tap="loadMoreFaq">
          <text>换一批</text>
          <uni-icons type="refresh" size="18" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 快捷服务 -->
    <view class="quick-service">
      <view class="service-title">快捷服务</view>
      <view class="service-grid">
        <view class="service-item" @tap="showConsultModal = true">
          <uni-icons type="chatboxes" size="36" color="#00C853"></uni-icons>
          <text class="service-text">在线客服</text>
        </view>
        <view class="service-item" @tap="showCallModal = true">
          <uni-icons type="phone" size="36" color="#00C853"></uni-icons>
          <text class="service-text">电话客服</text>
        </view>
        <view class="service-item" @tap="handleFeedback">
          <uni-icons type="compose" size="36" color="#00C853"></uni-icons>
          <text class="service-text">意见反馈</text>
        </view>
      </view>
    </view>

    <!-- 咨询方式选择弹窗 -->
    <view v-if="showConsultModal" class="modal-overlay" @tap="showConsultModal = false">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">选择咨询方式</text>
        </view>
        <view class="option-item" @tap="handleOnlineService">
          <uni-icons type="chat" size="24" color="#00C853"></uni-icons>
          <view class="option-text">
            <text class="option-name">在线服务</text>
            <text class="option-tag">推荐</text>
          </view>
        </view>
        <view class="option-item" @tap="showCallModal = true; showConsultModal = false">
          <uni-icons type="phone" size="24" color="#00C853"></uni-icons>
          <view class="option-text">
            <text class="option-name">拨打热线</text>
            <text class="option-desc">工作时间: 9:00-21:00</text>
          </view>
        </view>
        <button class="cancel-btn" @tap="showConsultModal = false">取消</button>
      </view>
    </view>

    <!-- 拨打热线弹窗 -->
    <view v-if="showCallModal" class="modal-overlay" @tap="showCallModal = false">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">客服热线</text>
          <text class="phone-number">400-123-4567</text>
        </view>
        <view class="call-option" @tap="callPhone">
          <uni-icons type="phone-filled" size="24" color="#00C853"></uni-icons>
          <text class="option-name">拨打电话</text>
        </view>
        <view class="call-option" @tap="copyPhone">
          <uni-icons type="paperclip" size="24" color="#00C853"></uni-icons>
          <text class="option-name">复制号码</text>
        </view>
        <button class="cancel-btn" @tap="showCallModal = false">取消</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showConsultModal = ref(false);
const showCallModal = ref(false);

// 点击常见问题
const handleFaqClick = (question: string) => {
  uni.showToast({
    title: `查看问题: ${question}`,
    icon: 'none'
  });
};

// 加载更多常见问题
const loadMoreFaq = () => {
  uni.showToast({
    title: '换一批问题',
    icon: 'none'
  });
};

// 在线客服
const handleOnlineService = () => {
  showConsultModal.value = false;
  uni.showToast({
    title: '正在连接在线客服...',
    icon: 'loading',
    duration: 2000
  });
};

// 拨打电话
const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: '400-123-4567'
  });
  showCallModal.value = false;
};

// 复制号码
const copyPhone = () => {
  uni.setClipboardData({
    data: '400-123-4567',
    success: () => {
      uni.showToast({
        title: '号码已复制',
        icon: 'success'
      });
      showCallModal.value = false;
    }
  });
};

// 意见反馈
const handleFeedback = () => {
  uni.showToast({
    title: '意见反馈功能开发中',
    icon: 'none'
  });
};
</script>

<style scoped>
.customer-service-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.chat-container {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.bot-message {
  background-color: #e6f7ed;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  line-height: 1.6;
  font-size: 28rpx;
  color: #333;
}

.faq-section {
  margin-top: 20rpx;
}

.faq-header {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.faq-list {
  background-color: #f8f8f8;
  border-radius: 12rpx;
  overflow: hidden;
}

.faq-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #e0e0e0;
  font-size: 28rpx;
  color: #333;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-more {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rpx;
  margin-top: 20rpx;
  padding: 15rpx;
  font-size: 26rpx;
  color: #999;
}

.quick-service {
  background-color: #fff;
  padding: 30rpx;
}

.service-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.service-grid {
  display: flex;
  gap: 20rpx;
}

.service-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.service-text {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 999;
}

.modal-content {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 30rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.modal-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.phone-number {
  font-size: 40rpx;
  font-weight: bold;
  color: #00C853;
  display: block;
  margin-top: 15rpx;
}

.option-item, .call-option {
  display: flex;
  align-items: center;
  padding: 25rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  margin-bottom: 15rpx;
}

.option-text {
  flex: 1;
  margin-left: 15rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.option-name {
  font-size: 28rpx;
  color: #333;
}

.option-tag {
  font-size: 20rpx;
  color: #00C853;
  background-color: #e6f7ed;
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
}

.option-desc {
  font-size: 24rpx;
  color: #999;
}

.cancel-btn {
  width: 100%;
  padding: 25rpx;
  background-color: #f0f0f0;
  color: #666;
  border-radius: 12rpx;
  font-size: 28rpx;
  text-align: center;
  margin-top: 10rpx;
  border: none;
}
</style>